<template>
    <div>
        <el-card v-loading="loading">
            <el-descriptions class="margin-top" :title="form.task_name" :column="5">
                <el-descriptions-item label="发布对象：">{{ form.pub_obj_name }}</el-descriptions-item>
                <el-descriptions-item label="任务状态：">{{ form.status }}</el-descriptions-item>
                <el-descriptions-item label="已进行/总天数：">{{ form.has_days }}</el-descriptions-item>
                <el-descriptions-item label="打卡率：">{{ form.clockRate }}</el-descriptions-item>
                <el-descriptions-item label="完成度：">{{ form.completionRate }} </el-descriptions-item>
            </el-descriptions>
        </el-card>

        <div class="table-wrap">
            <p>
                <el-button type="" @click="checkDetail" size="mini">日历查看任务详情</el-button>
            </p>

            <el-table :data="tableData" :loading="loading" size="mini" style="width: 100%;margin-bottom: 20px;"
                row-key="id" border stripe default-expand-all>
                <el-table-column prop="realname" label="学生姓名" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="clockinNums" label="累积已打卡" header-align="center"
                    align="center"></el-table-column>
                <el-table-column prop="noClockinNums" label="累积未打卡" header-align="center"
                    align="center"></el-table-column>
                <!--
                <el-table-column prop="create_time" label="连续打卡" header-align="center" align="center"></el-table-column>
                -->
                <el-table-column prop="clockinRate" label="打卡率" header-align="center" align="center"></el-table-column>
                <el-table-column prop="completionRate" label="完成度" header-align="center"
                    align="center"></el-table-column>
                <!--
                <el-table-column prop="clockRate" label="平均分" header-align="center" align="center"></el-table-column>
                -->
            </el-table>


            <!--            <div class="block">-->
            <!--                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"-->
            <!--                               :current-page="pageInfo.pageNumber" :page-sizes="[10, 50, 100, 200]"-->
            <!--                               :page-size="pageInfo.pageSize"-->
            <!--                               background layout="total, sizes, prev, pager, next, jumper"-->
            <!--                               :total="pageInfo.total">-->
            <!--                </el-pagination>-->
            <!--            </div>-->
        </div>

        <div v-if="showCheckDetailVisible">
            <detail :visible.sync="showCheckDetailVisible" :id="form.id" :firstDate="firstDate"></detail>
        </div>
    </div>
</template>

<script>
import { getTaskDetail } from "@/api/kanke/exercises/task";
import Detail from "./components/detail";
export default {
    name: 'TaskDetail',
    components: {
        Detail
    },
    data() {
        return {
            loading: false,
            showCheckDetailVisible: false,
            firstDate: '',
            tableData: [],
            columns: [],
            form: {
                id: '',
                task_name: '',
                pub_obj_name: '',
                status: '',
                has_days: '',
                clockRate: '',
                completionRate: ''
            },
            pageInfo: {
                pageSize: 10,
                pageNumber: 1,
                total: 0
            }
        }
    },
    created() {
        this.form = { ...this.$route.query };
        this.init();
    },
    methods: {
        init() {
            this.loading = true;
            console.log('init', this.form);
            getTaskDetail({ id: this.form.id }).then((res) => {
                console.log(res)
                this.tableData = res.data.list;
                this.firstDate = res.data.day_date;
                this.pageInfo.total = res.data.total;
                this.loading = false;
            })
        },
        checkDetail: function () {
            console.log('test');
            this.showCheckDetailVisible = true;
        },
        handleSizeChange: function (e) {
            this.pageInfo.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            this.pageInfo.pageNumber = e;
            this.init();
        }

    }
}


</script>

<style lang="scss" scoped>
::v-deep .el-descriptions-item__label::after {
    content: none;
}
</style>